<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><{$Think.config.cfg_webname}></title>
    <link href="__CSS__/base.css" rel="stylesheet">
    <link rel="stylesheet" href="__PUBLIC__/custom/uimaker/easyui.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/custom/uimaker/icon.css">
    <style>
        #formAdd table{ width:100%;}
        #formAdd table td{ padding:5px;}
        #formAdd table td.td-left{text-align: right; padding-right: 10px;}
        .myImg {
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }

        .myImg:hover {opacity: 0.7;}

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.7);
        }

        .modal-content {
            margin: auto;
            display: block;
            /*width: 100%;*/
            max-width: 600px;
        }

        #caption {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            text-align: center;
            color: #ccc;
            padding: 10px 0;
            height: 150px;
        }

        .modal-content, #caption {
            -webkit-animation-name: zoom;
            -webkit-animation-duration: 0.6s;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        @-webkit-keyframes zoom {
            from {-webkit-transform: scale(0)}
            to {-webkit-transform: scale(1)}
        }

        @keyframes zoom {
            from {transform: scale(0.1)}
            to {transform: scale(1)}
        }

        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

        .close:hover,
        .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        @media only screen and (max-width: 700px){
            .modal-content {
                width: 100%;
            }
        }

        span.textbox.combo {
            width: 155px !important;
            height: 28px !important;
        }
        a.textbox-icon.combo-arrow {
            width: 20px !important;
            height: 28px !important;
        }
    </style>
</head>
<body>
<div class="container">
    <table id="cxdm"></table>
    <div id="myModal" class="modal close">
        <!--<span >×</span>-->
        <img class="modal-content" id="imgInfo">
        <div id="caption"></div>
    </div>

    <div id="DivAdd" class="easyui-dialog" style="width:450px;padding:10px 20px"
         closed="true" resizable="true" modal="true" data-options="iconCls: 'icon-add',buttons: '#dlg-buttons'">
        <!-- <form id="formAdd" method="post" novalidate="novalidate" enctype="multipart/form-data" action='<{:U("Prop/propOption")}>'>
        <button type="submit">132123</button> -->
        <form id="formAdd" method="post" novalidate="novalidate" enctype="multipart/form-data">
            <input type="hidden" id="action" name="action">
            <input type="hidden" id="id" name="itemid">
            <table>
                <tr>
                    <td class="td-left" width="25%">道具名:</td>
                    <td width="75%"><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="height:30px;"></td>
                </tr>
                <tr>
                    <td class="td-left">游戏名称:</td>
                    <td width="75%">
                    <input id="cc1" class="easyui-combobox" name="gameid" data-options="
                        required:true,
                        valueField: 'gameid',
                        textField: 'game',
                        value:'12',
                        text:'nihao',
                        url: '<{:U('Prop/gameList')}>',
                        onSelect: function(rec){
                        var url = '<{:U('Prop/currencyList2')}>?gameid='+rec.gameid;
                        $('#cc2').combobox('reload', url);
                        }">

                    </td>
                </tr>

                <tr>
                    <td class="td-left">是否绑定:</td>
                    <td>
                        <input type="radio" name="isbind" value="1">是</input>
                        <input type="radio" name="isbind" value="0">否</input>
                    </td>
                </tr>
                <tr>
                    <td class="td-left">货币名称:</td>
                    <td width="75%">
                     <input id="cc2" class="easyui-combobox" name="currencyid" data-options="valueField:'curyid',textField:'currency',required:true">
                    </td>
                </tr>
                <tr>
                    <td class="td-left" width="25%">兑换货币数量:</td>
                    <td width="75%"><input class="easyui-textbox" type="text" name="cnum" data-options="required:true" style="height:30px;"></td>
                </tr>
                <tr>
                    <td class="td-left">排序:</td>
                    <td><input class="easyui-numberspinner" value="1" name="orderid" data-options="increment:1,required:true" style="height:30px;"></td>
                </tr>
                <tr>
                    <td class="td-left">图标:</td>
                    <td><input class="easyui-filebox" name="icon" data-options="prompt:'选择图标',buttonText:'&nbsp;选&nbsp;择&nbsp;',required:true" ></td>
                </tr>

            </table>
        </form>
    </div>
    <div id="dlg-buttons">
        <div style="text-align:right;">
            <a href="javascript:void(0)" class="easyui-linkbutton" id="btnAddOK" iconcls="icon-ok" onclick="btnAddOK()">确定</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#DivAdd').dialog('close')">关闭</a>
        </div>
    </div>
</div>
<div id="tb" style="padding:0 30px;">
    <div>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add"  onclick = "addCasCasdeData()">新增</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick = "delCurrency()">删除</a>
    </div>
</div>

<script type="text/javascript" src="__PUBLIC__/custom/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/custom/jquery.easyui.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/custom/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">

// $("#cc2").combobox('setValue','1');



    $(function(){
        //加载数据
        $('#cxdm').datagrid({
            title:'道具管理',
            width:'100%',
            height:$(window).height(),
            fitColumns:true,
            striped: true,
            checkOnSelect:true,
            singleSelect : true,
            frozenColumns:[[
                {field:'chek',checkbox:true}
            ]],
            url:'<{:U("Prop/propList")}>',
            loadMsg:'数据加载中请稍后……',
            pagination: false,
            rownumbers: false,
            pageSize:10,
            toolbar:'#tb',
            columns:[[
                {field:'itemid',title: 'ID',align: 'center',sortable:"true",width:50},
                {field:'game',title: '游戏名称',align: 'center',width:60},
                {field:'title',title: '道具名',align: 'center',width:80},
                {field:'isbind',title: '是否绑定',align: 'center',width:60,
                    formatter:function(val,row,index){
                        if(val == 1){
                            return "已绑定";
                        } else{
                            return "<span style='color: red'>"+"未绑定"+"</span>";
                        }
                    }
                },


                {
                    field : 'icon',
                    title : '图标',
                    align : 'center',
                    width : 100,
                    formatter:function(value,row){
                        var str = "";
                        if(value!="" || value!=null){
                            return "<a href=\"javascript:void(0)\"onclick = \"imdBig()\"><img class='myImg' style='height:50px;width: 50px' src = <{:C('WEBHOME')}>"+value+"></a>";

                        }
                    }},
                {field:'currency',title: '货币名称',align: 'center',width:50},
                {field:'cnum',title: '兑换货币数量',align: 'center',width:50},
                {field:'admin',title: '操作人',align: 'center',width:50,hidden:"ture"},
                {field:'orderid',title: '排序',align: 'center',width:50},
                {field:'createtime',title: '创建时间',align: 'center',width:100,hidden:"ture",
                    formatter:function(val,row,index){
                        return RiQi(val);
                    }
                },
                {field:'updatetime',title: '修改时间',align: 'center',width:100,hidden:"ture",
                    formatter:function(val,row,index){
                        return RiQi(val);
                    }
                },
                {field:'operate',title: '操作',align: 'center',width:100,
                    formatter:function(val,row,index){
                       return "<a href = '<{:U("Prop/itemDetial")}>/itemid/"+row.itemid+"'>查看详情</a>";
                    }
                },
            ]],
        });
    });
    //修改
    function editCasCasdeData(){
        var arr=$('#cxdm').datagrid('getSelections');
        var oldpath = arr[0]['iconpath'];
        if(!arr[0]){
            $.messager.alert('提示','请选择一条数据!');
            return false;
        }
        $("#DivAdd").dialog('open').dialog('setTitle', '修改');
        $("#oldPath").text(oldpath).css("color","red");
        $("#oldpic").prop('src','/'+oldpath)
        $("#already").text("已有道具图片:");
        $('#formAdd').form('load',arr[0]);
        $('#action').val("update");
    }

    function addCasCasdeData(){
        $("#DivAdd").dialog('open').dialog('setTitle', '新增');
        $('#formAdd').form('clear');
        $('#action').val("add");
    }
    function reload(){
        window.location.reload();
    }
    function btnAddOK() {
        $('#formAdd').form('submit',{
            url: '<{:U("Prop/propOption")}>',
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                var result = eval('('+result+')');
                console.log(result.success);
                if (result.success){
                    if(!result.id){
                        $.messager.confirm('提示', '添加成功，继续添加?', function(r){
                            if (r){
                                $('#formAdd').form('clear');
                            }else{
                                reload();
                            }
                        });
                    }else{
                        $.messager.alert('提示','修改成功!','info',function(){
                            reload();
                        });
                    }
                } else {
                    $.messager.show({
                        title: '错误提示',
                        msg: result.msg
                    });
                }
            }
        });
    }
    function delCurrency(){
        var arr=$('#cxdm').datagrid('getSelections');
        var cc = arr[0];

        if(!cc){
            $.messager.alert('提示','请选择一条数据!');
            return false;
        }
        $.messager.confirm('提示', '确定删除?', function(r){
            if (r){
               var itemid = cc.itemid;
               $.ajax({
                    url:'<{:U("Prop/delProp")}>',
                    data:{
                        itemid:itemid,
                    },
                    success:function(result){
                        if (result.sta==1){
                            $.messager.alert('提示','删除成功!','info',function(){
                                reload();
                            });
                        } else {
                            $.messager.show({
                                title: '错误提示',
                                msg: result.msg
                            });
                        }
                    }
               })
            }
        });
    }

    /**
     * 时间戳格式化日期
     * @param sj 时间戳
     * @returns {string}
     * @constructor
     */
    function RiQi(sj) {
        var   now = new Date(sj*1000);
        var   year=now.getFullYear();
        var   month=now.getMonth()+1;
        var   date=now.getDate();
        var   hour=now.getHours();
        var   minute=now.getMinutes();
        var   second=now.getSeconds();
        return   year+"-"+month+"-"+date+"   "+hour+":"+minute+":"+second;

    }

    /**
     * 点击设置图片放大
     */
    function imdBig() {

        var modal = document.getElementById('myModal');
        var modalImg = document.getElementById("imgInfo");
        var captionText = document.getElementById("caption");
        $(".myImg").on("click",function(){
            modal.style.display = "block";
            modalImg.src = this.src;
            modalImg.alt = this.alt;
            captionText.innerHTML = this.alt;
        });
        var span = document.getElementsByClassName("close")[0];
        span.onclick = function() {
            modal.style.display = "none";
        }
    }



</script>
</body>
</html>

    